<template>
  <div>
    <el-card>
      李锦鹤
      <page-tool>
        <!-- 说明 -->
        <div slot="before">
          <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        </div>
        <!-- 新增试题按钮 -->
        <div slot="after">
          <el-button type="success" icon="el-icon-edit" class="el-button--small"
            @click="$router.push('/questions/new')">新增试题</el-button>
        </div>
      </page-tool>
      <!-- 表单区域 -->
      <el-form label-position="right" label-width="80px" :model="formData" ref="formDataRef" class="demo-form-inline">
        <el-row :span="24">
          <el-col :span="6">
            <el-form-item label="学科" size="small" prop="subjectID">
              <!-- 点击学科列表后才可以得到二级的分类的数据 -->
              <el-select v-model="formData.subjectID" @change="getSecondSubjectList" placeholder="请选择"
                style="width: 100%">
                <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录" size="small" prop="catalogID">
              <el-select v-model="formData.catalogID" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in secondList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签" size="small" props="tags">
              <el-select v-model="formData.tags" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字" size="small" prop="keyword">
              <el-input v-model="formData.keyword" placeholder="根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型" size="small" prop="questionType">
              <el-select v-model="formData.questionType" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in questionTypeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度" size="small" prop="difficulty">
              <el-select v-model="formData.difficulty" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in difficultyList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向" size="small" prop="direction">
              <el-select v-model="formData.direction" placeholder="请选择" style="width: 100%">
                <el-option v-for="(item, i) in direction" :key="i" :label="item" :value="item">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人" size="small" prop="creatorID">
              <el-select v-model="formData.creatorID" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in usersList" :key="item.id" :label="item.username" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注" size="small" prop="remarks">
              <el-input v-model="formData.remarks" placeholder="请输入题目备注"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称" size="small" prop="shortName">
              <el-input v-model="formData.shortName" placeholder="请输入企业简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市" size="small" prop="province">
              <el-select v-model="formData.province" @change="getCityhandle" placeholder="请选择"
                style="width: 48%; margin-right: 2%;" size="small">
                <el-option v-for="(item, i) in provincesList" :key="i" :label="item" :value="item"></el-option>
              </el-select>
              <el-select ref="citySelectRef" v-model="formData.city" size="small" placeholder="请选择" style="width: 50%">
                <el-option v-for="(item, i) in cityList" :key="i" :label="item" :value="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align: right;">
              <el-button size="small" @click="clearData"> 清除</el-button>
              <el-button type="primary" size="small" @click="searchData">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- tabs标签页 -->
      <el-tabs v-model="activeName" type="card">
        <!-- 全部tabs切换栏 -->
        <el-tab-pane label="全部" name="all">
          <!-- alert 信息提示栏 -->
          <el-alert v-if="alertText !== ''" :title="alertText" type="info" show-icon style="margin-bottom: 15px">
          </el-alert>
          <!-- 固定列表格 -->
          <el-table :data="allTableData" style="width: 100%">
            <el-table-column label="试题编号" width="120" prop="number">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="280">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.addDate | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="难度" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column label="审核状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.chkState === 1">已审核</span>
                <span v-else-if="scope.row.chkState === 2">已拒绝</span>
                <span v-else>待审核</span>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column label="发布状态" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.publishState === 1">已发布</span>
                <span v-else-if="scope.row.publishState === 2">待发布</span>
                <span v-else>已下架</span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" fixed="right" align="center" width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true"
                  @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">
                  {{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 固定列表格/ -->

          <!-- 分页 -->
          <div class="pagination" style="margin-top: 20px; text-align: right;">
            <div class="pages">
              <el-pagination background @size-change="handleSizeChange" :current-page="Number(requestParameters.page)"
                @current-change="handleCurrentChange" :total="Number(total)"
                :page-size="Number(requestParameters.pagesize)" :page-sizes="[5,10,20,50]"
                layout=" prev, pager, next, sizes, jumper"></el-pagination>
            </div>
          </div>
        </el-tab-pane>
        <!-- 全部tabs切换栏/ -->

        <!-- 待审核tabs切换栏 -->
        <el-tab-pane label="待审核" name="wait">
          <!-- alert 信息提示栏 -->
          <el-alert type="info" show-icon :closable="false" style="margin-bottom: 15px">
            <template slot="title">
              <span>数据一共{{ this.waitTableData.length }}条</span>
            </template>
          </el-alert>
          <!-- alert 信息提示栏/ -->

          <!-- 固定列表格 -->
          <el-table :data="waitTableData" style="width: 100%">
            <el-table-column label="试题编号" width="120" prop="number">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="280">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.addDate | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="难度" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column label="审核状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.chkState === 1">已审核</span>
                <span v-else-if="scope.row.chkState === 2">已拒绝</span>
                <span v-else>待审核</span>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column label="发布状态" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.publishState === 1">已发布</span>
                <span v-else-if="scope.row.publishState === 2">待发布</span>
                <span v-else>已下架</span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" fixed="right" align="center" width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true"
                  @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">
                  {{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="pagination" style="margin-top: 20px; text-align: right;">
            <div class="pages">
              <el-pagination background @size-change="handleSizeChange" :current-page="Number(requestParameters.page)"
                @current-change="handleCurrentChange" :total="Number(total1)"
                :page-size="Number(requestParameters.pagesize)" :page-sizes="[5,10,20,50]"
                layout=" prev, pager, next, sizes, jumper"></el-pagination>
            </div>
          </div>
        </el-tab-pane>

        <!-- 已审核tabs切换栏 -->
        <el-tab-pane label="已审核" name="check">
          <!-- alert 信息提示栏 -->
          <el-alert type="info" show-icon style="margin-bottom: 15px">
            <template slot="title">
              <span>数据一共{{ this.alreadyTableData.length }}条</span>
            </template>
          </el-alert>

          <!-- 固定列表格 -->
          <el-table :data="alreadyTableData" style="width: 100%">
            <el-table-column label="试题编号" width="120" prop="number">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="280">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.addDate | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="难度" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column label="审核状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.chkState === 1">已审核</span>
                <span v-else-if="scope.row.chkState === 2">已拒绝</span>
                <span v-else>待审核</span>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column label="发布状态" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.publishState === 1">已发布</span>
                <span v-else-if="scope.row.publishState === 2">待发布</span>
                <span v-else>已下架</span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" fixed="right" align="center" width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true"
                  @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">
                  {{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 固定列表格/ -->
          <!-- 分页 -->
          <div class="pagination" style="margin-top: 20px; text-align: right;">
            <div class="pages">
              <el-pagination background @size-change="handleSizeChange" :current-page="Number(requestParameters.page)"
                @current-change="handleCurrentChange" :total="Number(total2)"
                :page-size="Number(requestParameters.pagesize)" :page-sizes="[5,10,20,50]"
                layout=" prev, pager, next, sizes, jumper"></el-pagination>
            </div>
          </div>
        </el-tab-pane>

        <!-- 已拒绝tabs切换兰 -->
        <el-tab-pane label="已拒绝" name="reject">
          <!-- alert 信息提示栏 -->
          <el-alert type="info" show-icon style="margin-bottom: 15px">
            <template slot="title">
              <span>数据一共{{ this.refuseTableData.length }}条</span>
            </template>
          </el-alert>

          <!-- 固定列表格 -->
          <el-table :data="refuseTableData" style="width: 100%">
            <el-table-column label="试题编号" width="120" prop="number">
            </el-table-column>
            <el-table-column prop="subject" label="学科" width="120">
            </el-table-column>
            <el-table-column prop="catalog" label="目录" width="120">
            </el-table-column>
            <el-table-column prop="questionType" label="题型" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </template>
            </el-table-column>
            <el-table-column label="题干" width="280">
              <template slot-scope="scope">
                <span v-html="scope.row.question"></span>
              </template>
            </el-table-column>
            <el-table-column label="录入时间" width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.addDate | parseTimeByString }}</span>
              </template>
            </el-table-column>
            <el-table-column label="难度" width="80">
              <template slot-scope="scope">
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </template>
            </el-table-column>
            <el-table-column prop="creator" label="录入人" width="120">
            </el-table-column>
            <el-table-column label="审核状态" width="120">
              <template slot-scope="scope">
                <span v-if="scope.row.chkState === 1">已审核</span>
                <span v-else-if="scope.row.chkState === 2">已拒绝</span>
                <span v-else>待审核</span>
              </template>
            </el-table-column>
            <el-table-column prop="chkRemarks" label="审核意见" width="150">
            </el-table-column>
            <el-table-column prop="chkUser" label="审核人" width="120">
            </el-table-column>
            <el-table-column label="发布状态" width="180">
              <template slot-scope="scope">
                <span v-if="scope.row.publishState === 1">已发布</span>
                <span v-else-if="scope.row.publishState === 2">待发布</span>
                <span v-else>已下架</span>
              </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作" fixed="right" align="center" width="200">
              <template slot-scope="scope">
                <el-button @click="previewhandleClick(scope.row)" type="text" size="small">预览</el-button>
                <el-button type="text" size="small" :disabled="scope.row.chkState === 0 ? false : true"
                  @click="checkHandleClick(scope.row)">审核</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="modifyHandleClick(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="cancelHandleClick(scope.row)">
                  {{ scope.row.publishState === 0 ?  '上架' : '下架'}}</el-button>
                <el-button type="text" size="small" :disabled="scope.row.publishState === 0 ? false : true"
                  @click="deleteTestHandle(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 固定列表格/ -->
          <!-- 分页 -->
          <div class="pagination" style="margin-top: 20px; text-align: right;">
            <div class="pages">
              <el-pagination background @size-change="handleSizeChange" :current-page="Number(requestParameters.page)"
                @current-change="handleCurrentChange" :total="Number(total3)"
                :page-size="Number(requestParameters.pagesize)" :page-sizes="[5,10,20,50]"
                layout=" prev, pager, next, sizes, jumper"></el-pagination>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 题目预览对话框 -->
    <el-dialog title="题目预览" :visible.sync="testPreviewVisible" width="60%">
      <el-row>
        <el-col :span="6">【题型】：<span v-if="testPreviewDate.questionType==='1'">单选</span><span
            v-else-if="testPreviewDate.questionType==='2'">多选</span><span v-else>简单</span></el-col>
        <el-col :span="6">【编号】：{{testPreviewDate.id}}</el-col>
        <el-col :span="6">【难度】：<span v-if="testPreviewDate.difficulty==='1'">简单</span><span
            v-else-if="testPreviewDate.difficulty==='2'">一般</span><span v-else>困难</span></el-col>
        <el-col :span="6">【标签】：{{testPreviewDate.tags}}</el-col>
        <el-col :span="6">【学科】：{{testPreviewDate.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{testPreviewDate.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{testPreviewDate.direction}}</el-col>
      </el-row>
      <hr>
      <el-row>【题干】：</el-row>
      <p v-html="testPreviewDate.question" style="color:#00f"></p>
      <el-row>多选题 选项：(选中的选项为正确答案)</el-row>
      <el-row>
        <el-col v-for="item in testPreviewDate.options" :key="item.id">
          <el-checkbox v-model="item.isRight" :true-label='1' :false-label='0'>{{item.title}}</el-checkbox>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="3">【参考答案】：</el-col>
        <el-col :span="21">
          <el-button type="danger" @click="flag=!flag">视频答案预览</el-button>
        </el-col>
        <el-col>
          <video :src="testPreviewDate.videoURL" width="400px" controls autoplay v-if="flag===true"></video>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="3">【答案解析】：</el-col>
        <el-col :span="21"><a :href="testPreviewDate.remarks">{{testPreviewDate.remarks}} 有答案</a>
        </el-col>
      </el-row>
      <hr>
      <el-row>
        <el-col :span="3">【题目备注】：</el-col>
        <el-col :span="21">{{testPreviewDate.remarks}} 有答案
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="testPreviewVisible = false" type="primary">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 题目审核对话框 -->
    <el-dialog title="题目审核" :visible.sync="auditDialogVisible" width="21%">
      <el-form ref="form" size="normal">
        <el-form-item label="">
          <el-radio-group v-model="form.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-input type="textarea" v-model="form.chkRemarks"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="auditDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="auditClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple } from '@/api/hmmm/subjects.js'
import { choice, detail, choiceCheck, remove, choicePublish } from '@/api/hmmm/questions.js'
import { simple as directorysSimple } from '@/api/hmmm/directorys.js'
import { simple as tagsSimple } from '@/api/hmmm/tags.js'
import { list } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'

export default {
  data () {
    return {
      // 筛选区域表单数据列表
      // 学科项目
      formData: {
        // 学科
        subjectID: null,
        // 二级目录
        catalogID: null,
        // 标签名
        tags: null,
        // 关键字
        keyword: null,
        // 试题类型
        questionType: null,
        // 难度
        difficulty: null,
        // 方向
        direction: null,
        // 录入人
        creatorID: null,
        // 题目备注
        remarks: null,
        // 企业简称
        shortName: null,
        // 企业所在城市
        province: null,
        // 企业所在区
        city: null,
        // 审核状态
        chkState: 'all'
      },
      activeName: 'all',
      // 全部数据列表
      allTableData: [],
      // 待审核数据列表
      waitTableData: [],
      // 已审核数据列表
      alreadyTableData: [],
      // 已拒绝数据列表
      refuseTableData: [],
      // 请求页码数
      requestParameters: {
        page: 1,
        pagesize: 5
      },
      // 总条数
      total: null,
      // 信息提示条数
      alertText: '',
      // 数据条数
      counts: null,
      // 学科列表
      subjectList: [],
      // 二级目录列表
      secondList: [],
      // 标签目录列表
      tagsList: [],
      // 困难程度列表
      difficultyList: [
        {
          value: 1,
          label: '简单'
        },
        {
          value: 2,
          label: '一般'
        },
        {
          value: 3,
          label: '困难'
        }
      ],
      // 题型列表
      questionTypeList: [
        {
          value: 1,
          label: '单选'
        },
        {
          value: 2,
          label: '多选'
        },
        {
          value: 3,
          label: '简答'
        }
      ],
      // 方向列表
      direction: [
        'o2o',
        '外包服务',
        '企业服务',
        '互联网金融',
        '企业咨询',
        '互联网',
        '电子商务',
        '其他'
      ],
      // 录入人列表
      usersList: [],
      // 省份信息列表
      provincesList: [],
      // 城市信息列表
      cityList: [],
      // 试题预览的显示与隐藏
      testPreviewVisible: false,
      // 当前试题预览数据
      testPreviewDate: {},
      // 精选题库审核状态列表
      chkType: [],
      // 精选题库试题发布状态
      publishType: [],
      // 题目审核弹框的显示与隐藏
      auditDialogVisible: false,
      // 当前试题审核数据
      questionCheckDate: {},
      flag: false,
      form: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      },
      total1: 0,
      total2: 0,
      total3: 0
    }
  },
  methods: {
    // 获取题库列表
    async getChoice (data) {
      this.alreadyTableData = []
      this.refuseTableData = []
      this.waitTableData = []
      const { data: res } = await choice(this.requestParameters)
      // console.log(res)
      this.allTableData = res.items
      this.total = res.counts

      // 获取提示条数
      this.alertText = `数据一共 ${this.total} 条`
      res.items.forEach(item => {
        if (item.chkState === 1) {
          this.alreadyTableData.push(item)
          this.total2 = this.alreadyTableData.length
        } else if (item.chkState === 2) {
          this.refuseTableData.push(item)
          this.total3 = this.refuseTableData.length
        } else {
          this.waitTableData.push(item)
          this.total1 = this.waitTableData.length
        }
      })
    },
    // 获取筛选列表
    // 学科项
    async getSubject () {
      const { data: res } = await simple()
      // console.log(res)
      try {
        this.subjectList = res
      } catch (error) {
        this.$message.error('获取数据失败!')
      }
    },
    // 获取二级及标签数据
    async getSecondSubjectList () {
      // 拿到二级分类数据的id值
      const { data: res } = await directorysSimple(this.formData)
      // console.log(res)
      this.secondList = res
      // 标签
      const { data: tagsData } = await tagsSimple(this.formData)
      // console.log(tagsData)
      this.tagsList = tagsData
    },
    // 录入人
    async getUser () {
      const { data } = await list()
      console.log(data)
      this.usersList = data.list
    },
    // 城市
    getCityhandles () {
      const res = provinces()
      // console.log(res)
      this.provincesList = res
    },
    // 区域
    getCityhandle (val) {
      // console.log(citys(val))
      this.cityList = citys(val)
      this.formData.city = citys(val)[0]
    },
    // 搜索按钮
    async searchData () {
      const { data } = await choice(this.formData)
      console.log(data)
      this.total = data.counts
      this.allTableData = data.items
    },
    // // 每页显示信息条数
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      if (this.requestParameters.page === 1) {
        this.getChoice(this.requestParameters)
      }
    },
    // 清除数据按钮
    clearData () {
      this.$refs.formDataRef.resetFields()
      this.secondList = []
      this.tagsList = []
      // 城市清空
      this.formData.city = ''
      // 将标签清空
      this.formData.tags = ''
      this.getChoice()
    },
    // 试题预览功能
    async previewhandleClick (testPreview) {
      const { data } = await detail(testPreview)
      // console.log(data)
      // 点击预览按钮，展示弹出框
      this.testPreviewVisible = true
      // console.log(testPreview)
      this.testPreviewDate = data
    },
    // 审核功能
    async checkHandleClick (row) {
      console.log(row)
      // const { data } = choiceCheck(row)
      this.form.id = row.id
      this.auditDialogVisible = true
    },
    // 审核确定按钮
    async auditClick () {
      // console.log(this.questionCheckDate)
      try {
        await choiceCheck(this.form)
        this.$message.success('审核完成')
        // console.log(data)
        this.auditDialogVisible = false
        this.getChoice()
      } catch (error) {
        this.$message.error('审核失败')
      }
    },
    // 试题上下架功能
    async cancelHandleClick (pub) {
      // console.log(pub)
      // 根据id判断状态
      const publishStateId = pub.id
      let publishStates = pub.publishState
      const pubval = pub.publishState === 1 ? '下架' : '上架'
      // 弹框询问是否确认下架
      const confirmResult = await this.$confirm(`您确定${pubval}这道题目吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return this.$message.info(`已取消${pubval}这道题目`)
      if (publishStates !== 1) {
        await choicePublish({
          id: publishStateId,
          publishState: 1
        })
        this.$message.success(`${pubval}成功!`)
        publishStates = 1
        this.getChoice()
      } else {
        await choicePublish({
          id: publishStateId,
          publishState: 0
        })
        this.$message.success(`${pubval}成功!`)
        publishStates = 0
        this.getChoice()
      }
    },
    // 删除试题功能
    async deleteTestHandle (testItem) {
      // 根据id值删除对应的试题
      const testItemID = testItem.id
      // console.log(testItemID) // 打印出每道试题的id值
      // 弹框询问是否删除该题目
      const confirmResult = await this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }
      await remove({ id: testItemID })
      this.$message.success('删除成功！')
      this.getChoice()
    },
    // 当前页码
    handleCurrentChange (val) {
      this.requestParameters.page = val
      this.getChoice()
    },
    modifyHandleClick (row) {
      this.$router.push({
        path: '/questions/new',
        query: {
          id: row.id
        }
      })
    }
  },
  computed: {},
  watch: {},
  filters: {},
  components: {},
  created () {
    this.getChoice()
    this.getSubject()
    this.getUser()
    this.getCityhandles()
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.explain {
  font-size: 12px;
  color: pink;
}
.demo-form-inline {
  margin-top: 15px;
}
</style>
